<template>
    <div>
        <el-button type="primary" style="width: 120px;" @click="showDialog">新增</el-button>
        <!-- 商品表格 -->
        <el-table :data="list" style="width: 100%;" border>
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column label="品牌名称" prop="tmName">

            </el-table-column>
            <el-table-column label="品牌LOGO" prop="logoUrl">
                <template slot-scope="{row}">
                    <img :src="row.logoUrl" style="width: 140px;height: 100px;text-align: center;">
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateTradeMark(row)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTradeMark(row)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination style="text-align: center;margin-left: 20px;" @size-change="handleSizeChange" :current-page="page"
            @current-change="handleCurrentChange" :page-sizes="[3, 5, 10, 20]" :page-size="limit"
            layout="prev, pager, next, jumper, ->,sizes,total" :total="totalPage">
        </el-pagination>

        <!-- 弹窗 -->
        <el-dialog title="添加品牌" :visible.sync="dialogVisible" width="45%">
            <el-form :rules="rules" style="width: 80%;" label-width="100px" :model="tmForm" ref="ruleForm">
                <el-form-item label="品牌名称" prop="tmName">
                    <el-input v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO" prop="logoUrl">

                    <el-upload class="avatar-uploader" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        action="/dev-api/admin/product/fileUpload" :show-file-list="false">
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="{row}">
                        <el-button type="primary" @click=addOrUpdateTradeMark style="margin-left: 150px;">确定</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </template>

                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "tradeMark",
    data() {
        return {
            //当前页
            page: 1,
            //每页数据
            limit: 3,
            //商品数据
            list: [],
            //数据总数
            totalPage: 0,
            //弹窗显示
            dialogVisible: false,
            //上传图片

            //收集的品牌信息
            tmForm: {
                tmName: '',
                logoUrl: '',
            },
            //表单验证规则
            rules: {
                tmName: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
                ],
                logoUrl: [
                    { required: true, message: '请选择品牌图片', trigger: 'change' }
                ],
            }
        }
    },
    async mounted() {
        console.log(this.$API);
        this.getDataList()
    },
    methods: {
        //获取数据
        async getDataList() {
            const { page, limit } = this
            let result = await this.$API.trademark.reqTradeMarkList(page, limit)
            if (result.code === 200) {
                this.totalPage = result.data.total
                this.list = result.data.records
                console.log(result);
            } else {
                alert('error')
            }
        },
        //点击添加
        showDialog() {
            this.dialogVisible = true;
            this.tmForm = { tmName: '', logoUrl: '' }
        },
        //点击页跳转
        handleCurrentChange(val) {
            this.page = val;
            this.getDataList()
        },
        //改变每页数据量
        handleSizeChange(val) {
            this.limit = val;
            this.getDataList()
        },
        //上传图片回调
        handleAvatarSuccess(res, file) {
            this.tmForm.logoUrl = res.data
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //修改
        updateTradeMark(row) {
            console.log(row);
            this.dialogVisible = true
            this.tmForm = { ...row }
        },
        //添加或修改品牌
        addOrUpdateTradeMark() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.dialogVisible = false
                    let result = await this.$API.trademark.reqAddOrUpdateTradeMark(this.tmForm)
                    if (result.code === 200) {
                        this.$message.success(this.tmForm.id ? "修改品牌成功！" : "添加品牌成功！")
                        //添加或修改之后更新数据
                        this, this.getDataList()
                    } else {
                        this.$message.error(result.data)
                    }
                } else {
                    this.$message.error('请正确填写')
                }

            })

        },
        //删除商品
        deleteTradeMark(row) {
            this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                //当用户点击确定时触发
                let result= await this.$API.trademark.deleteTradeMark(row.id)
                console.log(result);
                if (result.code===200) {
                    console.log('success');
                    this.getDataList()
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                } else {
                    this.$message.error(result.data)
                }
                
            }).catch(() => {
                //当用户点击取消时触发
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
       

    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>